<template>
  <div class="balance h-100%">
    <div class="acea-row mb-30px">
      <div
        v-for="item in tabList"
        :key="item.type"
        class="item acea-row row-center-wrapper text-16px mr-35px text-#666"
        :class="{ on: where.type === item.type }"
        @click="handleChangeTab(item.type,item.name)"
      >
        {{ item.name }}
      </div>
    </div>
    <OrderList v-if="where.type === 'my-order'" />
    <RefundList v-if="where.type === 'refund-order'" />
  </div>
</template>

<script lang="ts" setup>
import OrderList from './components/orderList.vue'
import RefundList from './components/refundList.vue'
const where = reactive({
 type: 'my-order',
 name: '我的订单',
})

const tabList = ref([
  {
    name: '我的订单',
    type: 'my-order',
  },
  {
    name: '售后订单',
    type: 'refund-order',
  }
])

const handleChangeTab = (type: string,name: string) => {
  where.type = type
  where.name = name
}

</script>

<style scoped lang="scss">
.balance {
  .item {
    position: relative;
    cursor: pointer;
    &.on {
      color: #e93323;
      &::before {
        content: '';
        position: absolute;
        top: 31px;
        bottom: 18px;
        height: 2px;
        width: 22px;
        background: #e93323;
      }
    }
  }
  &-item {
    margin-bottom: 20px;
    &:nth-last-child(1) {
      margin-bottom: 0;
    }
  }
}
</style>
